<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>liuboy.记录</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2531843_db7g6z3cnbl.css"/>
		<style>
			ul{
				list-style:none;
			}
			a{
				text-decoration:none;
			}
			.jilu{
				padding:0.3125rem 0.3125rem;
				font-size:.8rem;
				background:#f5f5f5;
				border-radius:0.3125rem;
			}
			.jiluTitle{
				display:inline-block;
				padding:0 0.3125rem ;
				border-radius:0.3125rem;
				color:#fff;
				background:#3CB371;
			}
			.jiluTime{
				font-size:.6rem;
				color:#ccc;
			}
			.footer{
				font-size:.9rem;
				text-align:center;
			}
			.pagination{
				margin:10px 0;
			}
			.active{
				background:#3CB371;
				color:#fff;
			}
			/*手机端*/
			@media screen and (max-width:429px){
				.header{
					display:flex;
					width:100%;
					flex-wrap:wrap;
				}
				.title{
					width:90%;
				}
				i{
					width:10%;
				}
				.nav{
					width:100%;
					height:0;
					margin:.75rem 0;
					overflow:hidden;
					transition:height .3s linear 0s;
					background:rgba(46,139,87,1);
					border-radius:.375rem;
				}
				ul{
					padding:0 2.5rem;
					margin:0.625rem 0;
				}
				.nav li{
					width:100%;
					margin:3px 0;
					line-height: 1.3rem;
					background:rgba(211,211,211,.1);
					border-radius:3px;
				}
				.nav li:nth-child(2){
					width:95%;
				}
				.nav li:nth-child(3){
					width:90%;
				}
				.nav a{
					padding-left:0.9375rem;
					font-size:.9rem;
					color:#000;
				}
				.nav a i{
					font-size:.8rem;
					color:#ccc;
				}
				
				}
				@media screen and (min-width:480px){
					*{
						margin:0;
						padding:0;
					}
					html{
						font-size:22px;
					}
					.header i{
						display:none;
					}
					ul{
						overflow:hidden;
						width:91%;
						height:50px;
						margin:10px auto;
						background:rgba(46,139,87,1);
					}
					ul li{
						float:left;
					}
					.jilu{
						clear:both;
					}
					ul li a{
						line-height:50px;
						color:#fff;
					}
					.jilu,.page,.pagination{
						width:90%;
						margin:10px auto;
					}
					.pagination select{
						font-size:.8rem;
					}
					.pagination input{
						font-size:1rem;
					}
				}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="title"> liuboy 起点</div>
			<i>三</i>
			<div class="nav">
				<ul>
					<li><a href="index.html"><i class="iconfont icon-zhuye"></i>&nbsp;主页</a></li>
					<li><a href="jilu.html"><i class="iconfont icon-jilu1"></i>&nbsp;记录</a></li>
					<li><a href="pages.html"><i class="iconfont icon-wenzhang"></i>&nbsp;文章</a></li>
				</ul>
			</div>
		</div>
		<!--记录-->
		<div class="jilu">
			<div class="jiluTitle">记录</div>
			<div class="jiluInfo">
				
			</div>
		</div>
		<div class="pagination">
			<select name="pageSize">
				<option value="1">1条</option>
				<option value="2">2条</option>
				<option value="3">3条</option>
			</select>
				/页
		</div>
		<!--尾部-->
		<div class="footer">
			<i>版权所有</i>
		</div>
	</body>
	<script src="./ajax.js"></script>
	<script>
		window.onload=function(){
		var $ = (el)=>{return document.querySelector(el)}
		var i = $("i")
		var nav = $(".nav")
		var jiluInfo = $('.jiluInfo')
		var pagination = $('.pagination')
		var select = $('select')
		i.addEventListener("click",()=>{if(nav.style.height=='5.625rem'){nav.style.height='0'}else{nav.style.height=5.625+'rem'};})
		var pageNum = 1
		var pageSize = 1
		ajax({
			url:'http://localhost:3000/jilu',
			type:'POST',
			async:true,
			data:{
				pageNum,
				pageSize
			},
			success:function(jiluData){
				console.log(jiluData)
				var jiluDataJson = JSON.parse(jiluData)
				//拿到数据根据数据操作dom
				var jiluInfoItemsList =[]
				for(i=0;i<jiluDataJson.data.length;i++){
				var jiluInfoItems = document.createElement('div')
				jiluInfoItems.className = 'jiluInfoItems'
				var jiluContent = document.createElement('div')
				jiluContent.className = 'jiluContent'
				jiluContent.innerHTML=jiluDataJson.data[i].content
				var jiluTime = document.createElement('div')
				jiluTime.className = 'jiluTime'
				jiluTime.innerHTML = jiluDataJson.data[i].createtime
				jiluInfoItems.appendChild(jiluContent)
				jiluInfoItems.appendChild(jiluTime)
				jiluInfoItemsList.push(jiluInfoItems)
				jiluInfo.appendChild(jiluInfoItems)
				}
				//动态生成分页按钮
				select.onchange = function(){
					for(l=0;l<(jiluDataJson.data.length);l++){
					jiluInfo.removeChild(jiluInfoItemsList[l])
						console.log(jiluDataJson)
					}
					for(m=0;m<(jiluDataJson.allPageSize+2);m++){
					pagination.removeChild(inputList[m])
					console.log(inputList[m])
					}
					// setTimeout(function(){
						window.pageNum = 1
						window.pageSize = select.value
						console.log(window.pageSize)
						getJiLu(window.pageNum,window.pageSize)
					// },100)
					
					
				}
				var inputList =[]
				var input = document.createElement('input')
				input.type = 'button'
				input.value = "<"
				input.onclick = function(){
					for(l=0;l<jiluDataJson.data.length;l++){
					jiluInfo.removeChild(jiluInfoItemsList[l])
					}
					for(m=0;m<jiluDataJson.allPageSize+2;m++){
					pagination.removeChild(inputList[m])
					}
					window.pageNum = pageNum-1
					if(window.pageNum<1){
						window.pageNum = 1
					}
					getJiLu(window.pageNum,pageSize)
					console.log(window.pageNum)
				}
				inputList.push(input)
				pagination.appendChild(input)
				
				for(j=1;j<=jiluDataJson.allPageSize;j++){
				var input = document.createElement('input')
				input.type = 'button'
				input.value = j
				input.id = j
				input.setAttribute('data-num',j) 
				inputList.push(input)
				input.onclick =function(e){
					console.log(e.target.getAttribute('data-num'))
					 window.pageNum = e.target.getAttribute('data-num')
					 for(l=0;l<jiluDataJson.data.length;l++){
					 jiluInfo.removeChild(jiluInfoItemsList[l])
					 }
					 for(m=0;m<jiluDataJson.allPageSize+2;m++){
					 pagination.removeChild(inputList[m])
					 }
					getJiLu(window.pageNum,pageSize)
				}
				pagination.appendChild(input)
				}
				var input = document.createElement('input')
				input.type = 'button'
				input.value = ">"
				input.onclick = function(){
					for(l=0;l<jiluDataJson.data.length;l++){
					jiluInfo.removeChild(jiluInfoItemsList[l])
					}
					for(m=0;m<jiluDataJson.allPageSize+2;m++){
					pagination.removeChild(inputList[m])
					}
					window.pageNum = pageNum+1
					if(window.pageNum>jiluDataJson.allPageSize){
						window.pageNum = jiluDataJson.allPageSize
					}
					getJiLu(window.pageNum,pageSize)
					console.log(window.pageNum)
				}
				inputList.push(input)
				//设置默认按钮选中
				inputList[1].className = 'active'
				pagination.appendChild(input)
				
		
		function getJiLu(pageNum,pageSize){
			ajax({
				url:'http://localhost:3000/jilu',
				type:'POST',
				async:true,
				data:{
					pageNum,
					pageSize
				},
				success:function(jiluData){
					console.log(jiluData)
					var jiluDataJson = JSON.parse(jiluData)
					window.jiluDataJson = jiluDataJson
					console.log(window.jiluDataJson)
					//拿到数据根据数据操作dom
					var jiluInfoItemsList =[]
					for(i=0;i<jiluDataJson.data.length;i++){
					var jiluInfoItems = document.createElement('div')
					jiluInfoItems.className = 'jiluInfoItems'
					var jiluContent = document.createElement('div')
					jiluContent.className = 'jiluContent'
					jiluContent.innerHTML=jiluDataJson.data[i].content
					var jiluTime = document.createElement('div')
					jiluTime.className = 'jiluTime'
					jiluTime.innerHTML = jiluDataJson.data[i].createtime
					jiluInfoItems.appendChild(jiluContent)
					jiluInfoItems.appendChild(jiluTime)
					jiluInfoItemsList.push(jiluInfoItems)
					jiluInfo.appendChild(jiluInfoItems)
					}
					//动态生成分页按钮
					select.onchange = function(){
						for(l=0;l<(jiluDataJson.data.length);l++){
						jiluInfo.removeChild(jiluInfoItemsList[l])
							console.log(jiluDataJson)
						}
						for(m=0;m<(jiluDataJson.allPageSize+2);m++){
						pagination.removeChild(inputList[m])
						console.log(inputList[m])
						}
						// setTimeout(function(){
							window.pageNum = 1
							window.pageSize = select.value
							console.log(window.pageSize)
							getJiLu(window.pageNum,window.pageSize)
						// },100)
						
						
					}
					var inputList =[]
					var input = document.createElement('input')
					input.type = 'button'
					input.value = "<"
					input.onclick = function(){
						for(l=0;l<jiluDataJson.data.length;l++){
						jiluInfo.removeChild(jiluInfoItemsList[l])
						}
						for(m=0;m<jiluDataJson.allPageSize+2;m++){
						pagination.removeChild(inputList[m])
						}
						window.pageNum = pageNum-1
						if(window.pageNum<1){
							window.pageNum = 1
						}
						getJiLu(window.pageNum,pageSize)
						console.log(window.pageNum)
					}
					inputList.push(input)
					pagination.appendChild(input)
					for(j=1;j<=jiluDataJson.allPageSize;j++){
					var input = document.createElement('input')
					input.type = 'button'
					input.value = j
					input.id = j
					input.setAttribute('data-num',j) 
					inputList.push(input)
					input.onclick =function(e){
						console.log(e.target.getAttribute('data-num'))
						 window.pageNum = e.target.getAttribute('data-num')
						 for(l=0;l<jiluDataJson.data.length;l++){
						 jiluInfo.removeChild(jiluInfoItemsList[l])
						 }
						 for(m=0;m<jiluDataJson.allPageSize+2;m++){
						 pagination.removeChild(inputList[m])
						 }
						getJiLu(window.pageNum,pageSize)
					}
					pagination.appendChild(input)
					}
					var input = document.createElement('input')
					input.type = 'button'
					input.value = ">"
					input.onclick = function(){
						for(l=0;l<jiluDataJson.data.length;l++){
						jiluInfo.removeChild(jiluInfoItemsList[l])
						}
						for(m=0;m<jiluDataJson.allPageSize+2;m++){
						pagination.removeChild(inputList[m])
						}
						window.pageNum = pageNum+1
						if(window.pageNum>jiluDataJson.allPageSize){
							window.pageNum = jiluDataJson.allPageSize
						}
						getJiLu(window.pageNum,pageSize)
						console.log(window.pageNum)
					}
					inputList.push(input)
					inputList[window.pageNum].className = 'active'
					pagination.appendChild(input)
					}
				
		})
		}
		}
		})
		
		
		}
	</script>
</html>
